<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>sessionStorage</h1>
    <input type="text" name="key" id="">
    <input type="text" name="val" id="">
    <button>设置存储</button>
    <button>获取存储</button>
    <button>删除存储</button>
    <button>获取存储长度</button>
    <button>清空存储</button>
    <script>
        // 1. 设置sessionStorage属性 setItem(key,val)
        let btns = document.querySelectorAll('button');
        let inps = document.querySelectorAll('input');
        // 1. 设置localStorage属性 setItem(key,val)
        btns[0].onclick = function() {
            let key = inps[0].value;
            let val = inps[1].value;

            // 设置本地存储
            sessionStorage.setItem(key, val)
        }

        // 2. 获取sessionStorage属性 getItem(key);

        // 3. 删除sessionStorage属性 removeItem(key);

        // 4. 获取sessionStorage的length 属性

        // 5. 清空sessionStorage的数据

        // 6. 当存储内容有变化时 监听 window.onstorage
    </script>
</body>

</html>